<template>
  <div class="index">

    <transition name="push">
      <bubble :percent="per" :style="{bottom: 100+'px',right:8+'%'}"
              v-if="!canPush"
              :heart="globalSettings.hintPunch.value&&this.waterInc > this.user.drinkingTarget / 3.3"
              @click="toPush"></bubble>
      <push-edit
          :style="{bottom: 100+'px',right:8+'%'}"
          v-if="canPush"
          @pushSuccess="send"
          @click="toEndPush"
      ></push-edit>
    </transition>

    <draggable-menu></draggable-menu>
    <Planet></Planet>
  </div>
</template>

<script>

import Planet from "@/components/Planet";
import DraggableMenu from "@/components/common/DraggableMenu";
import Bubble from "@/components/mini/Bubble";
import {mapMutations, mapState} from "vuex";
import PushEdit from "@/components/PushEdit";

export default {
  name: "Index",
  components: {PushEdit, Bubble, DraggableMenu, Planet},
  data() {
    return {
      canPush: false,
    }
  },
  computed: {
    ...mapState(['user', 'waterInc', 'globalSettings']),
    per() {
      return this.user.drinkingWater / this.user.drinkingTarget;
    }
  },
  mounted() {
  },
  methods: {
    ...mapMutations(['notify']),
    toPush() {
      if (this.waterInc < this.user.drinkingTarget / 3.3) {
        this.notify({msg: '还未达成目标哦👀', duration: 1000});
        return;
      }
      this.canPush = true;
    },
    toEndPush() {
      this.canPush = false;
    },
    send() {
      this.canPush = false;
    }
  }
}
</script>

<style>


.push-enter-active {
  -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.push-leave-active {
  -webkit-animation: scale-out-br 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out-br 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-out-br {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@keyframes scale-out-br {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@-webkit-keyframes scale-in-br {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@keyframes scale-in-br {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    opacity: 1;
  }
}


</style>